<script setup lang="ts">
import { computed } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useAuthStore } from '@/store/modules/auth';
import { $t } from '@/locales';

defineOptions({ name: 'WelcomeSection' });

const appStore = useAppStore();
const authStore = useAuthStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));

// 模拟统计数据
interface StatisticData {
  id: number;
  label: string;
  value: string;
  icon: string;
}

const statisticData = computed<StatisticData[]>(() => [
  {
    id: 0,
    label: '系统健康指数',
    value: '96.8%',
    icon: 'mdi-heart-pulse'
  },
  {
    id: 1,
    label: '运行模型数',
    value: '24',
    icon: 'mdi-brain'
  },
  {
    id: 2,
    label: '今日分析任务',
    value: '136',
    icon: 'mdi-clipboard-check'
  }
]);
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:16">
        <div class="flex-y-center">
          <div class="size-72px shrink-0 overflow-hidden rd-1/2 bg-primary/10 flex items-center justify-center text-primary">
            <SvgIcon icon="mdi-robot" class="size-36px" />
          </div>
          <div class="pl-12px">
            <h3 class="text-24px font-semibold text-primary">欢迎使用 AI 智能分析平台</h3>
            <p class="text-#666 leading-30px mt-4px">一站式 AI 模型管理与监控解决方案，助力您的业务智能化升级</p>
          </div>
        </div>
      </NGi>
      <NGi span="24 s:24 m:8">
        <NSpace :size="24" justify="end">
          <NStatistic v-for="item in statisticData" :key="item.id" class="whitespace-nowrap" :label="item.label" :value="item.value">
            <template #prefix>
              <SvgIcon :icon="item.icon" class="text-primary mr-2" />
            </template>
          </NStatistic>
        </NSpace>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>